<template>
    <div>
        <div class="headerAll">
            <div class="leftHeader">
                <img src="../assets/image/logo-header.08ec1297.png" alt="">
            </div>
            <div class="middleHeader">
                <div class="search">
                    <input type="text" placeholder="搜索课程">
                    <div class="searchBotton">
                        <a-icon type="search"/>
                        <span>搜索</span></div>
                </div>
            </div>
          <!--头部购物车部分组件-->
            <div class="rightShopping">
                <Register-Header class="bb"></Register-Header>
            </div>
            <!--头部购物车部分组件结束-->
        </div>
        <Three-Title></Three-Title>
    </div>
</template>

<script>

    import ThreeTitle from "./ThreeTitle";
    import RegisterHeader from "./RegisterHeader";


    export default {
        name: 'Header',
        props: {
            msg: String
        },
        components: {
            ThreeTitle,
            RegisterHeader
        },
        methods: {


        },


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

    .headerAll {
        width: 1200px;
        height: 106px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            width: calc(100% / 3);
            height: 106px;
        }

        .leftHeader {
            line-height: 106px;
        }

        .middleHeader {
            /*padding: 30px 0px;*/

            .search {
                width: 400px;
                height: 40px;
                margin-top: 30px;

                input {
                    width: 320px;
                    height: 40px;
                    outline: none;
                    border: 1px solid #eaeaea;
                    float: left;
                    padding: 10px 20px;
                    border-radius: 100px 0px 0px 100px;
                }

                .searchBotton {
                    width: 80px;
                    height: 40px;
                    float: right;
                    padding: 10px 0px;
                    background-color: #00CF8C;
                    text-align: center;
                    color: #ffffff;
                    border-radius: 0px 100px 100px 0px;

                    span {
                        margin-left: 10px;
                    }
                }
            }
        }
        .rightShopping {
            line-height: 106px;
           .bb {
               float: right;
           }
        }
    }

</style>
